@import '../../../css/colorVar.less';
@labelWidth: ((12/24)/24) * 9 * 100%;
@labelWidth1: ((12/24)/24) * 6 * 100%;
@itemWidth: (0.5 * (11/24)/0.8125) * 100%;
@itemWidth1: (0.5 * (15/24)/0.875) * 100%;

.configRow {
  line-height: 28px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  span:first-child {
    width: 110px;
    display: inline-block;
    text-align: right;
    font-size: 14px;
    color: @text_secondary;
    margin-right: 5px;
  }

  span:nth-child(2) {
    font-size: 14px;
    color: @text_main;
  }
}

.configRow1 {
  line-height: 28px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  span:first-child {
    width: 145px;
    display: inline-block;
    text-align: right;
    font-size: 14px;
    color: @text_secondary;
    margin-right: 5px;
  }

  span:nth-child(2) {
    font-size: 14px;
    color: @text_main;
  }
}

.config {
  border: 1px solid @define_border;
  position: relative;
  padding-bottom: 70px;
  min-height: ~'calc(100vh - 183px)';

  > div:nth-child(2) {
    font-weight: 600;
    font-size: 14px;
    color: @text_main;
    padding: 15px 30px;
    border-bottom: 1px solid @define_inner_border;
  }
}

.bottomBtn {
  position: absolute;
  right: 20px;
  bottom: 20px;

  > div {
    margin-right: 10px;
  }
}

.topBtn {
  padding: 15px 30px;
  border-bottom: 1px solid @define_inner_border;

  > div {
    margin-right: 10px;
  }
}

.content {
  padding: 0 30px;

  > div:nth-child(2n-1) {
    margin-top: 20px;
  }

  > div:nth-child(2n) {
    background-color: @noData-bg;
    padding: 14px 0;
  }
}

.content1 {
  padding: 0 30px;

  > div:nth-child(2n-1) {
    margin-top: 20px;
  }
}

.switch {
  display: flex;
  width: 158px;

  > div:last-child {
    margin-top: -4px;
  }
}

.detail {
  display: flex;

  > div:first-child {
    border: 1px solid @define_border;
    border-right: 0;
    overflow: auto;
    background: @noData-bg;

    > div {
      height: 100%;

      > div {
        height: 100%;

        > div {
          height: 100%;
        }
      }
    }
  }

  > div {
    width: 50%;
    min-height: ~'calc(100vh - 183px)';
  }

  :global {
    .ant-legacy-form-explain {
      position: absolute;
    }
  }
}

.accountInfo {
  display: flex !important;

  > div {
    display: inline-block;
    font-size: 14px;
    color: @text_secondary;
  }

  > div:first-child {
    margin-right: 5px;
    width: 110px;
    text-align: right;
  }

  > div:nth-child(2) {
    font-size: 14px;
    color: @text_main;
    width: calc(~'100% - 115px');
    height: 105px;
    overflow-y: auto;

    > div {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}

:global {
  .account_list {
    margin-top: 6px !important;

    .ant-legacy-form-item {
      display: flex;
    }
    .has-error {
      .ant-select:not(.ant-select-customize-input) .ant-select-selector {
        border: 1px solid #ff4d4f;
      }
    }

    .icon_minus {
      width: 20px;
      height: 40px;
      font-size: 20px;
      line-height: 40px;
    }

    .add_icon {
      font-size: 20px;
      line-height: 20px;
      height: 20px;
      // margin-bottom: 20px;
    }

    .accountLabel > .ant-legacy-form-item-label::before {
      display: inline-block;
      margin-right: 4px;
      content: '*';
      font-family: SimSun;
      line-height: 1;
      font-size: 14px;
      color: @form_star;
    }
    .width10 {
      width: 10px;
    }
  }
}

:global {
  .addNode {
    .ant-legacy-form-item {
      margin-bottom: 8px;
    }

    .ant-col:last-child .ant-legacy-form-item {
      margin-bottom: 0;
    }
  }
}

@media screen and (max-width: 1600px) {
  :global {
    .account_list {
      :global {
        .add_icon {
          padding-left: @labelWidth;
        }

        .itemWidth {
          width: @itemWidth;
        }

        .ant-legacy-form-item {
          display: flex;

          .ant-legacy-form-item-label {
            width: @labelWidth;
          }

          .ant-legacy-form-item-control-wrapper {
            flex: 1;
          }

          .ant-legacy-form-item-control-wrapper {
            width: calc(100% - @labelWidth);
          }
        }
      }
    }
  }
}

@media (min-width: 1600px) {
  :global {
    .account_list {
      :global {
        .add_icon {
          padding-left: @labelWidth1;
        }

        .itemWidth {
          width: @itemWidth1;
        }

        .ant-legacy-form-item {
          display: flex;

          .ant-legacy-form-item-label {
            width: @labelWidth1;
          }

          .ant-legacy-form-item-control-wrapper {
            flex: 1;
          }

          .ant-legacy-form-item-control-wrapper {
            width: calc(100% - @labelWidth1);
          }
        }
      }
    }
  }
}
